<template>
	<view class="settings-page">
		<view class="section">
			<view class="row">
				<text class="label">头像</text>
				<view class="avatar-upload">
					<image 
						class="avatar-preview" 
						:src="getAvatarUrl(form.avatarUrl)" 
						mode="aspectFill"
					/>
					<button class="upload-btn" @click="chooseAvatar">上传头像</button>
				</view>
			</view>
			<view class="row">
				<text class="label">昵称</text>
				<input class="input" v-model="form.nickname" placeholder="请输入昵称" />
			</view>
			<view class="row">
				<text class="label">手机号</text>
				<input class="input" v-model="form.phone" placeholder="请输入手机号" />
			</view>
		</view>

		<view class="section">
			<view class="row">
				<text class="label">原密码</text>
				<input class="input" v-model="form.oldPassword" password placeholder="不修改可留空" />
			</view>
			<view class="row">
				<text class="label">新密码</text>
				<input class="input" v-model="form.newPassword" password placeholder="不修改可留空" />
			</view>
		</view>

		<view class="actions">
			<button class="btn save" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'
import { BASE_URL } from '../../utils/server.js'

export default {
	data() {
		return {
			form: {
				avatarUrl: '',
				nickname: '',
				phone: '',
				oldPassword: '',
				newPassword: ''
			}
		}
	},
	onLoad() {
		this.init();
	},
	methods: {
		async init() {
			const res = await api.getUserProfile();
			if (res.code === 0) {
				const info = res.data.userInfo || {};
				this.form.avatarUrl = info.avatarUrl || '';
				this.form.nickname = info.nickname || '';
				this.form.phone = info.phone || '';
			}
		},
		chooseAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0];
					this.uploadAvatar(tempFilePath);
				}
			});
		},
		async uploadAvatar(filePath) {
			uni.showLoading({ title: '上传中...' });
			try {
				const res = await api.uploadAvatar(filePath);
				if (res.code === 0) {
					this.form.avatarUrl = res.data;
					uni.hideLoading();
					uni.showToast({ title: '上传成功' });
				} else {
					uni.hideLoading();
					uni.showToast({ icon: 'none', title: res.message || '上传失败' });
				}
			} catch (e) {
				uni.hideLoading();
				uni.showToast({ icon: 'none', title: '上传失败' });
			}
		},
		getAvatarUrl(url) {
			if (!url) return '/static/logo.png';
			if (url.startsWith('http')) return url;
			return BASE_URL + url;
		},
		async save() {
			if (!this.form.nickname) {
				uni.showToast({ icon: 'none', title: '请输入昵称' });
				return;
			}
			const payload = { 
				avatarUrl: this.form.avatarUrl, 
				nickname: this.form.nickname, 
				phone: this.form.phone 
			};
			if (this.form.oldPassword && this.form.newPassword) {
				payload.oldPassword = this.form.oldPassword;
				payload.newPassword = this.form.newPassword;
			}
			try {
				const res = await api.updateUserProfile(payload);
				if (res.code === 0) {
					uni.showToast({ title: '保存成功' });
					setTimeout(() => { uni.navigateBack(); }, 600);
				} else {
					uni.showToast({ icon: 'none', title: res.message || '保存失败' });
				}
			} catch (e) {
				uni.showToast({ icon: 'none', title: '请求失败' });
			}
		}
	}
}
</script>

<style>
.settings-page { padding: 24rpx; }
.section { background: #fff; border-radius: 16rpx; padding: 8rpx 0; box-shadow: 0 8rpx 20rpx rgba(0,0,0,.04); margin-bottom: 24rpx; }
.row { display: flex; align-items: center; padding: 20rpx 24rpx; border-bottom: 2rpx solid #f5f6f7; }
.row:last-child { border-bottom: 0; }
.label { width: 180rpx; color: #666; font-size: 28rpx; }
.input { flex: 1; font-size: 28rpx; text-align: right; }
.avatar-upload { flex: 1; display: flex; align-items: center; gap: 20rpx; justify-content: flex-end; }
.avatar-preview { width: 100rpx; height: 100rpx; border-radius: 50%; background: #f0f0f0; }
.upload-btn { padding: 12rpx 24rpx; background: linear-gradient(135deg, #39c5bb, #54e0c7); color: #fff; border-radius: 20rpx; font-size: 26rpx; border: none; }
.actions { padding: 12rpx 0; }
.btn.save { width: 100%; background: linear-gradient(135deg,#ff7a45,#ff4d4f); color: #fff; border-radius: 16rpx; padding: 18rpx 0; font-size: 30rpx; }
</style>
